<template>
    <div class="footer-guide">
        <div class="row">
        <router-link to="msite">
        <span class="guide-item col-xs-3" :class="{on:$route.path==='/msite'}">
            <span>
                <i class="iconfont icon-waimai"></i>
            </span>
            <span>首页</span>
        </span>
        </router-link>
        <router-link to="search">
        <span class="guide-item col-xs-3" :class="{on:$route.path==='/search'}">
            <span>
                <i class="iconfont icon-sousuo"></i>
            </span>
            <span>搜索</span>
        </span>
        </router-link>
        <router-link to="order">
        <span class="guide-item col-xs-3" :class="{on:$route.path==='/order'}">
            <span>
                <i class="iconfont icon-dingdan"></i>
            </span>
            <span>订单</span>
        </span>
        </router-link>
        <router-link to="profile">
        <span class="guide-item col-xs-3" :class="{on:$route.path==='/profile'}">
            <span>
                <i class="iconfont icon-geren"></i>
            </span>
            <span>个人</span>
        </span>
        </router-link>
        </div>
    </div>
</template>

<script>
    export default {
        name: "FooterGuide",
        methods:{

        },
    }
</script>

<style scoped lang="stylus" rel="stylesheet/stylus">
  @import "../../common/stylus/minix.styl"
    #app
     .footer-guide
        position fixed
        height 50px
        bottom 0
        width 100%
        background-color white
      .row
        height 100%
        .guide-item
          height 100%
          text-align center
          display flex
          flex-direction column
          justify-content center
          span
            margin-top 5px
          &.on
           color $green
         i
           font-size 22px
</style>